<template>
  <div >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查询学生信息：">
        <el-input v-model="word" clearable placeholder="输入学生信息所包含字符" @clear="refresh(1)"/>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="loadStudents(1)">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="toaddStudent">添加</el-button>
      </el-form-item>

    </el-form>

    <el-table :data="students" style="width: 100%" max-height="550" >
      <el-table-column fixed prop="id" label="id" width="150" />
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column prop="age" label="年龄" width="150" />
      <el-table-column prop="gender" label="性别" width="150" />
      <el-table-column prop="idcard" label="身份证" width="250" />
      <el-table-column prop="address" label="地址" width="400" />

      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="success" size="small" @click="editStudent(scope.row)" >
            修改
          </el-button>
          <el-button link type="success" size="small" @click="removeStudentById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="demo-pagination-block1">
      <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[5,10,20]"
          :size="size"
          :disabled="false"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="refresh(this.current)"
          @current-change="loadStudents"
      />
    </div>

    <el-dialog v-model="StudentView" title="添加学生信息" width="400" @close="student={}">
      <el-form :model="student">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="student.name" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="student.gender">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="student.age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="student.idcard" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="student.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="StudentView = false">取消</el-button>
          <el-button type="success" @click="saveStudent">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script>

import {ElMessage} from "element-plus";

export default {
  name: "StudentView",
  data() {
    return {
      students:[],
      word:'',
      student:{},
      StudentView:false,
      formLabelWidth:'100px',
      total:0,
      current:1,
      pageSize:10,
    }
  },
  methods: {
    loadStudents(current) {
      console.log(111)
      console.log(current);
      this.current = current;
      this.$axios.get("/findStudentCountByName?current=" + this.current + "&pageSize=" + this.pageSize + "&name="+this.word)
          .then(result => {
            console.log(result.data.data);
            if (result.data.code === 200) {
              this.students = result.data.data.data;
              this.total = result.data.data.totalCount;
            } else {
              ElMessage.error('查询失败！')
            }
          })
    },
    //刷新数据
    refresh(cur){
      this.loadStudents(cur);
    },
    toaddStudent(){
      console.log(222);
      this.StudentView=true;
    },
    editStudent(stu){
      this.StudentView = true;
      //学生回显效果  stu --> string ---> 对象 深克隆
      this.student = JSON.parse(JSON.stringify(stu));
    },
    saveStudent(){
      if (this.student.id){
        this.$axios.post('/updateStudent',this.$qs.stringify(this.student))
            .then(result=>{
              if (result.data.code==200){
                this.StudentView = false;
                this.refresh(this.current);
                ElMessage.success('修改成功！');
              }else {
                ElMessage.error('修改失败！');
                this.StudentView = false;
              }
            })
      }else{
        this.$axios.post('/addStudent',this.$qs.stringify(this.student))
            .then(result=>{
              if (result.data.code==200){
                this.StudentView = false;
                this.refresh(this.current);
                ElMessage.success('添加成功！');
              } else {
                ElMessage.error('添加失败！')
                this.StudentView = false;
              }
            })
      }
    },
    removeStudentById(stu){
      this.$confirm('确认是否删除该学生？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.student = JSON.parse(JSON.stringify(stu));
        this.$axios.post('/RemoveStudentById?id='+this.student.id)
            .then(result=>{
              if (result.data.code==200){
                this.refresh(this.current);
                ElMessage.success('删除成功！');
              }else {
                ElMessage.error('删除失败！');
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })


    }
  },
    mounted() {
      this.loadStudents(1);
    }



}
</script>

<style scoped>


</style>